<template>
    <div class="main-content">
      <div class="card" style="padding: 15px">
        您好，{{ user.name }}！欢迎使用本平台
      </div>
      <div style="display: flex">
        <div style="flex: 12%; height: 350px; background-color: #0c0c0c"></div>
        <div style="flex: 76%">
          <el-carousel height="350px">
            <el-carousel-item v-for="item in carouselData">
              <img :src="item" alt="" style="width: 100%; height: 350px">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div style="flex: 12%; height: 350px; background-color: #0c0c0c"></div>
      </div>

      <!-- 平台介绍 -->
      <div class="platform-introduction">
        <h2 class="section-title">平台介绍</h2>
        <p>欢迎来到我们的成长成才监测平台，我们致力于提供最优质的教育资源和学习工具，帮助学生和教师实现更好的学习效果。</p>
        <p>平台特点：</p>
        <ul>
          <li>丰富的课程资源：我们提供各种学科的课程，满足不同学生的学习需求。</li>
          <li>个性化学习规划：根据学生的学习情况，提供个性化的学习建议和规划。</li>
          <li>心理健康：学生可以测试自己心理健康状况，也可以咨询心理专业的老师。</li>
          <li>学习资源推荐：根据学生的学习水平和兴趣，推荐合适的学习资源。</li>
        </ul>
      </div>

      <!-- 教师端首页新增内容 -->
      <div class="teacher-home-content">
        <div class="course-management">
          <div style="text-decoration: none" @click="navTo('/teacher/person')">教师信息</div>
        </div>
        <div class="course-management">
          <div style="text-decoration: none" @click="navTo('/teacher/course')">课程管理</div>
        </div>
        <div class="student-management">
          <div style="text-decoration: none" @click="navTo('/teacher/student')">学生管理</div>
        </div>
        <div class="student-management">
          <div style="text-decoration: none" @click="navTo('/manage/resources')">教学资源</div>
        </div>
<!--        <div class="announcements">-->
<!--          <h3>通知公告</h3>-->
<!--          <ul>-->
<!--            <li v-for="announcement in announcements" :key="announcement.id">-->
<!--              {{ announcement.content }}-->
<!--            </li>-->
<!--          </ul>-->
<!--        </div>-->
      </div>
    </div>
  </template>
  <script>

  export default {

    data() {
      return {
        user: JSON.parse(localStorage.getItem('honey-user') || '{}'),
        carouselData: [
            require('@/assets/img/image1.png'),
            require('@/assets/img/image3.jpg'),
            require('@/assets/img/image4.jpg'),
            require('@/assets/img/image8.webp'),
            require('@/assets/img/lun-4.jpg'),
        ],

      }
    },
    mounted() {
    },
    // methods：本页面所有的点击事件或者其他函数定义区
    methods: {
      navTo(path) {
        this.$router.push(path);
      },
      updateUser() {
        this.user = JSON.parse(localStorage.getItem('honey-user') || '{}')   // 重新获取下用户的最新信息
      },
      // 退出登录
      logout() {
        localStorage.removeItem("honey-user");
        this.$router.push("/");
      },
      navTo(url) {
        location.href = url
      }
  }
}
  </script>
  <style scoped>
  .platform-introduction {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
  }

  .platform-introduction h2 {
    color: #85CE36; /* 绿色 */
    font-size: 28px; /* 增大标题字体大小 */
    margin-bottom: 15px;
  }

  .platform-introduction p {
    line-height: 2;
    color: #3f3b3b; /* 深灰色 */
    font-size: 20px; /* 增大段落字体大小 */
  }

  .platform-introduction ul {
    list-style-type: disc;
    margin-left: 20px;
    font-size: 16px;
    color: #8c939d;
  }

  .teacher-home-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .teacher-info h3,
  .course-management,
  .student-management,
  .teaching-resources h3,
  .announcements h3 {
    color: #46520f;
    font-size: 24px;
    margin-bottom: 10px;
  }

  .teaching-resources ul,
  .announcements ul {
    list-style-type: none;
    padding: 0;
  }

  .teaching-resources ul li,
  .announcements ul li {
    margin-bottom: 10px;
  }
  </style>
